<template>
<div>
    <!-- 头部 -->
    <!-- <div class="top_tab1">
      <div class="left1" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>鸿包惠</span>
      <div class="right1">
      </div>
    </div> -->
    <!-- 主体部分 -->
    <div class="procommodity1">
      <div class="procommodity_box1" v-for="(item,index) in list3list" :key="index">
        <router-link :to='"/particulars?id="+item.id'>
        <div class="propic1">
          <img slot="img" v-lazy="item.thumb"> 
        </div>
        <div class="proinfo1">
          <div class="protitl1">
            <div class="proti1" v-if="item.is_admin == 2">直营</div>
            <div class="proti1" v-if="item.is_admin == 1">商城</div>
            <div class="proti1" v-if="item.is_admin == 0">商城</div>
            <div class="protitle1">{{item.title}}</div>
          </div>
          <div class="proprice1">
            <!-- <span class="prorate1">￥{{item.shop_price}} <span v-if="item.shop_price == null">0</span></span> -->
            <span class="prorate1" v-if="item.is_shoppingmall_auth == 0">￥{{parseInt(item.market_price)}}+{{item.redbag_num.split('.')[0]}}鸿包 </span>  
            <span class="prorate1" v-if="item.is_shoppingmall_auth == 1">￥{{parseInt(item.shop_price)}}送 {{item.welfareReds.split('.')[0]}}鸿包</span>  
            <span class="prorate1" v-if="item.is_shoppingmall_auth == 2">{{item.redbag_num.split('.')[0]}} 鸿包</span>  
            <span class="prorate1" v-if="item.is_shoppingmall_auth == 3">￥{{item.shop_price}}</span>  

          </div>
          <!-- <div class="proratediv1">
            <span class="procate1">￥{{item.market_price}}+{{item.redbag_num}} 鸿包</span>
          </div> -->
          <div class="prosold1">
              <div>已售 {{item.sale_number}} 件</div>
              <div>好评99%</div>
          </div>
        </div>
        </router-link>
      </div>  
    </div>
     <div class="without" v-if="list3list.length == 0">
          <img src="../assets/order_center/kongbai.png" alt="">
          <span>暂无数据</span>
      </div> 
    <transition name="el-fade-in">
       <div class="top2" @click="toTop()" v-show="toTopShow">Top</div>
    </transition>
</div>
</template>
<script>
export default {
  name: "product0",
  data() {
    return {
      list3list:[],
      logo: 'this.src="' + require('../assets/order_center/kongbai.png') + '"',
      toTopShow:false,

    };
  },
  methods: {
    // back: function() {
    //   this.$router.go(-1);
    // },
    particulars: function() {
      this.$router.push("/particulars");
    },
    //list3数据
    list3:function(id){ 
    let self = this;
    let url = "/api/goods/list";
    self.httpPost(url,{pagesize:999,p:1,id:id,type:''},function(res) {
      if (res.code == 200) {   
        self.list3list=res.data.data
      }else{
        self.$message.error(res.msg);
      } 
    })
    },
    handleScroll() {
      //首先修改相对滚动位置
      this.scrollTop = this.scrollTop = window.pageYOffset || document.body.scrollTop
      if (this.scrollTop > 300) {
        this.toTopShow = true
      }else {
        this.toTopShow = false
      }
    },
    //点击回到顶部
    toTop:function() {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
        //  document.documentElement.scrollTop-=50;
        // if (document.documentElement.scrollTop>0) {
        //     var c=setTimeout(()=>this.toTop(50),10);
        // }else {
        //     clearTimeout(c);
        // } 
    },
  },
    mounted() {
    this.$nextTick(function () {
      //修改事件监听
      window.addEventListener('scroll', this.handleScroll)
    });
  },
  created(){
     this.id = this.$route.query.id 
     this.ye = this.$route.query.ye 
     document.title = this.$route.query.wz
     this.list3(this.id)
  } 
};
</script><style scoped>
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}

.procommodity1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  /* background: #fff; */
  padding: 0.1rem 1% 0;
  /* padding-top: 1rem; */
}
.procommodity1 .procommodity_box1 {
  width: 49.3%;
  /* margin-bottom: 0.38rem; */
  background: #fff;
}
.procommodity_box1:nth-child(2) ~ .procommodity_box1 {
  margin-top: 0.1rem;
}
.procommodity1 .procommodity_box1 img {
  width: 100%;
}
.procommodity1 .procommodity_box1 .proinfo {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.1rem 0.1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.protitl1 {
  display: flex;
  justify-content: space-between;
}
.proti1 {
  margin-top: 0.05rem;
  width: 0.58rem;
  height: 0.35rem;
  line-height: 0.37rem;
  text-align: center;
  background: #ff0000;
  color: #fff;
  border-radius: 0.05rem;
}
.procommodity1 .procommodity_box1 .proinfo1 .protitle1 {
  width: 82%;
  font-size: 0.3rem;
  color: #666;
     white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.procommodity1 .procommodity_box1 .proinfo1 .proprice1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.procommodity1 .procommodity_box1 .proinfo1 .proprice1 .prorate1 {
  font-size: 0.3rem;
  color: #e63f3f;
}
.prosold1 {
  display: flex;
  justify-content: space-between;
  font-size: 0.22rem;
  color: #999;
  margin-top: 0.1rem;
}
.procommodity1 .procommodity_box1 .proinfo1 .procate1 {
  color: #f77138;
  text-align: center;
  font-size: 0.2rem;
  padding: 0 0.02rem;
}
.proratediv1 {
  /* width: 99%; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #f77138;
  display: inline-block;
  margin: 0 auto;
  margin-top: .15rem;
}
.proinfo1{
  padding: .1rem;
}
.propic1{
  height: 3.5rem;
  overflow: hidden;
  position: relative;
  min-height: 40px;
  background:rgba(126,188,250,.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.propic1 img{
  display: block;
}
/* 无数据 */
.without {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;

}
.without img {
  width: 3.23rem;
  height: 3.16rem;
}
.without span:nth-child(2) {
  font-size: 0.36rem;
  color: #707070;
  margin-top: 0.43rem;
}
.without span:nth-child(3) {
  font-size: 0.3rem;
  color: #b7b7b7;
  margin-top: 0.3rem;
}
.without .cate {
  color: #fff;
  width: 2.27rem;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 10px;
  font-size: 0.3rem;
  text-align: center;
  background: #e53a30;
  border: none;
  margin-top: 0.96rem;
}
img[lazy=loading] {
  height:40px;
  margin: auto;
  /* background: url("../assets/order_center/kongbai.png") no-repeat fixed center; */
}
</style>